<template>
  <div class="snsp">
    <Card title="选择商品">
      <el-table :data="tableDataA">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="spname" label="商品名称"> </el-table-column>
        <el-table-column prop="cpname" label="产品名称">
          <template slot-scope="scope">
            <el-checkbox-group v-model="scope.row.cpname.selectCheck">
              <el-checkbox
                v-for="(item, index) in scope.row.cpname.cheakList"
                :label="item"
                :key="index"
                >{{ item }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
        </el-table-column>
        <el-table-column prop="zfxx" label="资费信息">
          <template slot-scope="scope">
            <el-checkbox-group v-model="scope.row.zfxx.selectCheck">
              <el-checkbox
                v-for="(item, index) in scope.row.zfxx.cheakList"
                :label="item"
                :key="index"
                >{{ item }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :total="tableDataA.length"></Pagination>
    </Card>
    <Card title="开展区域">
      <el-form size="small" inline label-width="100px" :model="formC">
        <el-form-item label="开展区域">
          <el-cascader
            v-model="formC.valA"
            :options="areaList"
            :props="{ expandTrigger: 'hover' }"
          ></el-cascader>
        </el-form-item>
      </el-form>
    </Card>
    <Card title="生效规则">
      <el-form inline size="small">
        <el-form-item label="业务开通">
          <el-radio-group v-model="radio">
            <el-radio :label="1">立即生效</el-radio>
            <el-radio :label="2">次日生效</el-radio>
            <el-radio :label="3">下月生效</el-radio>
          </el-radio-group>
        </el-form-item>
        <br />
        <el-form-item label="业务注销">
          <el-radio-group v-model="radioA">
            <el-radio :label="1">立即生效</el-radio>
            <el-radio :label="2">次日生效</el-radio>
            <el-radio :label="3">下月生效</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card'
import areaList from '@/utils/area'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Card,
    Pagination
  },

  data() {
    return {
      areaList: areaList,
      radio: 1,
      radioA: 1,
      tableDataA: [
        {
          spname: '集团V网',
          cpname: {
            cheakList: ['集团V网'],
            selectCheck: []
          },
          zfxx: {
            cheakList: ['月功能费'],
            selectCheck: []
          }
        },
        {
          spname: '专网专线',
          cpname: {
            cheakList: ['专网专线省内', '专网专线跨境'],
            selectCheck: []
          },
          zfxx: {
            cheakList: ['安装调测费', '月功能费'],
            selectCheck: []
          }
        },
        {
          spname: '千里眼',
          cpname: {
            cheakList: ['千里眼', '千里眼小微'],
            selectCheck: []
          },
          zfxx: {
            cheakList: ['月功能费'],
            selectCheck: []
          }
        },
        {
          spname: '云视讯',
          cpname: {
            cheakList: ['云视讯虚拟号', '云视讯固话'],
            selectCheck: []
          },
          zfxx: {
            cheakList: ['月功能费'],
            selectCheck: []
          }
        },
        {
          spname: '跨省互联网专线',
          cpname: {
            cheakList: ['跨省互联网专线'],
            selectCheck: []
          },
          zfxx: {
            cheakList: ['月功能费', '安装调测费', 'IP地址费'],
            selectCheck: []
          }
        }
      ],
      tableData: {
        col: [
          {
            prop: 'colA',
            label: '商品编号'
          },
          {
            prop: 'colB',
            label: '商品名称'
          },
          {
            prop: 'colC',
            label: '商品资费'
          }
        ],
        row: [
          {
            colA: '50013',
            colB: '千里眼',
            colC: '68元/月'
          },
          {
            colA: '50014',
            colB: '云视讯',
            colC: '168元/月'
          },
          {
            colA: '50015',
            colB: '专网专线',
            colC: '88元/月'
          },
          {
            colA: '50016',
            colB: '千里眼互联网专线',
            colC: '288元/月'
          }
        ]
      },
      formA: {
        valA: '',
        valB: '',
        valC: '',
        valD: ''
      },
      formB: {
        valA: '',
        valB: '',
        valC: '',
        valD: '',
        valE: ''
      },
      formC: {
        valA: '',
        valB: ''
      }
    }
  },

  methods: {
    hanleClick() {
      this.$emit('hanlePer', true)
    }
  }
}
</script>

<style lang="scss" scoped></style>
